<template>
	<view class="tab-audio">
		<view class="item uv-flex-row">
			<view class="title">
				<uv-text text="打字音效" size="16px" color="#BABAD8" margin="0 0 4px 0"></uv-text>
				<uv-text text="您可以选择开启或关闭按键时发出的打字音效" size="14px" color="#BABAD8" custom-style="opacity: 0.5;"></uv-text>
			</view>
			<view class="switch uv-flex-row">
				<uv-switch @change="change($event,'TYPING')" v-model="setting.TYPING" active-color="#F2CB29" inactive-color="#38384D" custom-style="cursor: pointer;"></uv-switch>
			</view>
		</view>
		<view class="item uv-flex-row">
			<view class="title">
				<uv-text text="游戏音效" size="16px" color="#BABAD8" margin="0 0 4px 0"></uv-text>
				<uv-text text="您可以选择开启或关闭游戏课程的声音" size="14px" color="#BABAD8" custom-style="opacity: 0.5;"></uv-text>
			</view>
			<view class="switch uv-flex-row">
				<uv-switch @change="change($event,'GAME')" v-model="setting.GAME" active-color="#F2CB29" inactive-color="#38384D" custom-style="cursor: pointer;"></uv-switch>
			</view>
		</view>
		<view class="btn-default" @click="reset(setting)">
			<text>恢复默认</text>
		</view>
	</view>
</template>
<script setup>
	import { reactive, ref, watchEffect } from 'vue';
	import useSetting from './useSetting.js';
	const { update, reset } = useSetting();
	const setting = reactive({
		TYPING: true,
		GAME: true
	})
	watchEffect(() => {
		for (let key in setting) {
			setting[key] = getApp().globalData.setting?.[key];
		}
	})
	// 修改
	function change(e, type) {
		update(type, e);
	}
</script>
<style scoped lang="scss">
	@import 'common.scss';
</style>